<!-- 棋子 -->
<script>
export default {
    name: 'Pieces',
    props: ['piecesInfo', 'x', 'y'],
    methods: {
        setPices() {
            this.$bus.emit('setPices', { x: this.x, y: this.y, who: 2 })
        }
    }
}
</script>
<template>
    <div id="pkj" @click="setPices">
        <div class="a x rb db"></div>
        <div class="b x lb db"></div>
        <div class="c x rb tb"></div>
        <div class="d x lb tb"></div>
        <div class="zi" v-show="piecesInfo" :class="piecesInfo == 1?'dong':'dongr'"
            :style="piecesInfo == 1 ? 'background-color: black;' : 'background-color: white;'">
        </div>
    </div>
</template>
<style scoped>
#pkj {
    /* border: 1px solid black; */
    width: 36px;
    height: 36px;
    /* margin: 30px; */
    line-height: 0;
    position: relative;
    display: inline-block;
}

#pkj:hover {
    outline: 1px dashed red;
}

.zi {
    height: 100%;
    width: 100%;
    border-radius: 100%;
    /* outline: 1px solid black; */
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.138);
    position: relative;
    box-shadow: 3px 3px 3px gray;

}

.dong {
    animation: xia 666ms;
}
.dongr{
    animation: xiar 666ms;
}

@keyframes xia {
    from {
        box-shadow: 5px 5px 5px gray;
        transform: rotate3d(0);
        bottom: -100%;
        left: -100%;
        box-shadow: none;
        width: 150%;
        height: 150%;
    }
    to {
        box-shadow: 0px 0px 0px gray;
        transform: rotate3d(0, 1, 0, 1turn);
        bottom: 0%;
        left: 0%;
        box-shadow: 3px 3px 3px gray;
        width: 100%;
        height: 100%;
    }
}


@keyframes xiar {
    from {
        box-shadow: 5px 5px 5px gray;
        transform: rotate3d(0);
        bottom: -100%;
        right: -100%;
        box-shadow: none;
        width: 150%;
        height: 150%;
    }
    to {
        box-shadow: 0px 0px 0px gray;
        transform: rotate3d(0, 1, 0, 1turn);
        bottom: 0%;
        right: 0%;
        box-shadow: 3px 3px 3px gray;
        width: 100%;
        height: 100%;
    }
}

.a {
    border-right: 1px solid;
    border-bottom: 1px solid;
    position: absolute;
    top: 0;
    left: 0;
}

.b {
    border-left: 1px solid;
    border-bottom: 1px solid;
    position: absolute;
    top: 0;
    right: 0;
}

.c {
    border-top: 1px solid;
    border-right: 1px solid;
    position: absolute;
    bottom: 0;
    left: 0;
}

.d {
    border-top: 1px solid;
    border-left: 1px solid;
    position: absolute;
    bottom: 0;
    right: 0;
}

.x {
    display: inline-block;
    width: 50%;
    height: 50%;
    border-color: grey;
    z-index: -1;
}
</style>